<template>
  <div>
    <el-button @click="goBack">返回</el-button>
    <div class="form" style="margin-top: 20px;">
      <el-form :model="form" :inline="true">
        <el-form-item label="模板名称:">
          <el-input v-model="form.name" clearable style="width: 175px;" />
        </el-form-item>
        <el-form-item>
          <el-button @click="form.name = '', tableData = []">重置</el-button>
          <el-button type="primary" @click="getList">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button type="primary" @click="openCreate(1)">新增</el-button>
    </div>
    <div class="table" style="margin-top: 20px;">
      <el-table :data="tableData" border style="width: 1760px;" max-height="580">
        <el-table-column prop="name" label="模板名称" />
        <el-table-column prop="createBy" label="添加人" width="400" />
        <el-table-column prop="createTime" label="添加时间" width="480" />
        <el-table-column label="操作" width="440">
          <template #default="scope">
            <el-button link type="primary" size="small" @click.prevent="openCreate(2, scope.row)">
              编辑
            </el-button>
            <el-button link type="primary" size="small" @click.prevent="templatedeleteBtn(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="page">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
  <div>
    <el-dialog v-model="compileContent" width="600">
      <span>
        <el-form :model="compileContentForm" style="max-width: 600px" inline>
          <el-form-item label="模板名称：">
            <el-input v-model="compileContentForm.name" style="width:200px" clearable />
          </el-form-item>
          <el-form-item label="导出内容：">
            <div style="max-height: 300px;overflow-y: auto; /* 垂直方向上出现滚动条 */">
              <el-checkbox-group v-model="compileContentForm.moduleIdList" value-key="key">
                <el-checkbox :label="item.id" :value="item.id" v-for="item in getTemplateModuleListTab"
                  :key="item.id">{{
                    item.cname }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </el-form>

      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="compileContent = false">取消</el-button>
          <el-button type="primary" @click="confirmCompileContent">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { ElMessage } from 'element-plus'
import { templatelist, getTemplateModuleList, getTemplateUpdateDetail, templateupdate, templatecreate, templatedelete } from '@/api/index'
const form = ref({
  name: '',
  pageSize: 5,
  pageNum: 1
})
onBeforeMount(() => {
  getList()
})
const tableData = ref([])
const goBack = () => {
  window.history.go(-1)
}
// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const total = ref(0)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  form.value.pageSize = val
  getList()
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  form.value.pageNum = val
  getList()
}
// list
const getList = () => {
  templatelist(form.value).then(res => {
    const { data: { data } } = res
    console.log('data')
    console.log(data)
    tableData.value = data.list
    total.value = data.total
  })
}
const compileContentForm = ref({
  id: '',
  name: '',
  moduleIdList: []
})
const compileContent = ref(false)
const idsRow = ref('')
const openCreate = (id, row) => {
  idsRow.value = id
  if (id === 2) {
    compileContentForm.value.id = row.id
    getTemplateUpdateDetailBtn(row.id)
  } else if (id === 1) {
    compileContentForm.value.id = ''
    getTemplateModuleListBtn()
    compileContent.value = true
  }
}
const getTemplateModuleListTab = ref([])
const getTemplateModuleListBtn = () => {
  getTemplateModuleList().then(res => {
    compileContentForm.value.moduleIdList = []
    const { data: { data } } = res
    console.log('data')
    console.log(data)
    getTemplateModuleListTab.value = data
  })
}
const getTemplateUpdateDetailBtn = (id) => {
  getTemplateUpdateDetail({
    id: id
  }).then(res => {
    compileContentForm.value.moduleIdList = []
    const { data: { data } } = res
    console.log('data')
    console.log(data)
    getTemplateModuleListTab.value = data.moduleListVOList
    compileContentForm.value.name = data.name
    data.moduleListVOList.forEach(element => {
      console.log(element.isCheck)
      if (element.isCheck === 1) {
        compileContentForm.value.moduleIdList.push(element.id)
      }
    })
    compileContent.value = true
  })
}
const confirmCompileContent = () => {
  if (compileContentForm.value.id) {
    templateupdate(compileContentForm.value).then(res => {
      ElMessage.success('操作成功')
      compileContent.value = false
      getList()
    })
  } else {
    templatecreate(compileContentForm.value).then(res => {
      ElMessage.success('操作成功')
      compileContent.value = false
      getList()
    })
  }
}
const templatedeleteBtn = (row) => {
  templatedelete({ id: row }).then(res => {
    ElMessage.success('操作成功')
    getList()
  })
}
</script>

<style lang='less' scoped></style>
